<template>
  <a-modal
    title="创建文件夹"
    :width="450"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >


    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-form-model-item :labelCol="{span:4}" :wrapperCol="{span:20}" style="margin-bottom:10px"
                         :validate-status="validate_status1" prop="name">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>请输入文件夹名称</span>
          </template>
          <a-avatar style="backgroundColor:#87d068" icon="plus"/>
        </a-tooltip>

        <a-input v-model="model.name" :class="{'valid-error':validate_status1=='error'}" placeholder="请输入文件夹名称"
                 style="margin-left:10px;width: 80%">

        </a-input>
      </a-form-model-item>


    </a-form-model>
  </a-modal>
</template>

<script>


export default {
  name: 'DepartMkdir',
  data() {
    return {
      visible: false,
      dirName: '',
      validate_status1: "",
      model: {},
      validatorRules: {
        name: [{required: true, message: '请输入文件名称'}],
      },

    }
  },
  computed: {},
  methods: {
    clear() {
      this.visible = false;
      this.validate_status1 = ''
    },
    show() {
      this.visible = true
    },

    handleOk() {
      const that = this;
      var filename = this.model.name;
      if (filename === null || filename === undefined || filename === '') {
        this.validate_status1 = 'error'
        return false;
      }
      that.$emit('ok', this.model.name);

    },
    // 关闭
    handleCancel() {
      this.close();
    },
    close() {
      this.visible = false;
      this.$refs.form.resetFields();
    },
  }
}
</script>

<style scoped>

</style>